<template>
  <div id="people">
    <img style="width:100%" src="../assets/img/one/titleimg.png" alt="">
    <div class="fs prople-box">
      <div class="left mt30">
        <div class="title">内部数据</div>
        <div class="item mt6">
          <div class="text fb">
            <span>党员数</span>
            <span>35514</span>
          </div>
          <a-progress style="width:100%" :strokeColor="{ from: '#0c2c4f', to: '#09c0f5' }" :percent="88"
            :strokeWidth="4" status="active" :show-info="false" />
        </div>
        <div class="item mt6">
          <div class="text fb">
            <span>区管干部数</span>
            <span>507</span>
          </div>
          <a-progress style="width:100%" :strokeColor="{ from: '#0c2c4f', to: '#09c0f5' }" :percent="2"
            :strokeWidth="4" status="active" :show-info="false" />
        </div>
        <div class="item mt6">
          <div class="text fb">
            <span>在职在编人员数</span>
            <span>8095</span>
          </div>
          <a-progress style="width:100%" :strokeColor="{ from: '#0c2c4f', to: '#09c0f5' }" :percent="20"
            :strokeWidth="4" status="active" :show-info="false" />
        </div>
        <div class="item mt6">
          <div class="text fb">
            <span>社工人员数</span>
            <span>1665</span>
          </div>
          <a-progress style="width:100%" :strokeColor="{ from: '#0c2c4f', to: '#09c0f5' }" :percent="5"
            :strokeWidth="4" status="active" :show-info="false" />
        </div>
        <div class="item mt6">
          <div class="text fb">
            <span>临聘人员数</span>
            <span>2813</span>
          </div>
          <a-progress style="width:100%" :strokeColor="{ from: '#0c2c4f', to: '#09c0f5' }" :percent="7"
            :strokeWidth="4" status="active" :show-info="false" />
        </div>
      </div>
      <div class="right mt30">
        <div class="title">外部数据</div>
        <div class="item mt6">
          <div class="text fb">
            <span>工程企业人员</span>
            <span>3314</span>
          </div>
          <a-progress style="width:100%" :strokeColor="{ from: '#0c2c4f', to: '#09c0f5' }" :percent="11"
            :strokeWidth="4" status="active" :show-info="false" />
        </div>
        <div class="item mt6">
          <div class="text fb">
            <span>死亡人员</span>
            <span>15065</span>
          </div>
          <a-progress style="width:100%" :strokeColor="{ from: '#0c2c4f', to: '#09c0f5' }" :percent="38"
            :strokeWidth="4" status="active" :show-info="false" />
        </div>
        <div class="item mt6">
          <div class="text fb">
            <span>工程数</span>
            <span>1617</span>
          </div>
          <a-progress style="width:100%" :strokeColor="{ from: '#0c2c4f', to: '#09c0f5' }" :percent="38"
            :strokeWidth="4" status="active" :show-info="false" />
        </div>
        <div class="item mt6">
          <div class="text fb">
            <span>房产出租数</span>
            <span>983</span>
          </div>
          <a-progress style="width:100%" :strokeColor="{ from: '#0c2c4f', to: '#09c0f5' }" :percent="3"
            :strokeWidth="4" status="active" :show-info="false" />
        </div>
        <div class="item mt6">
          <div class="text fb">
            <span>补助人数</span>
            <span>16023</span>
          </div>
          <a-progress style="width:100%" :strokeColor="{ from: '#0c2c4f', to: '#09c0f5' }" :percent="50"
            :strokeWidth="4" status="active" :show-info="false" />
        </div>
        <!-- <div class="relatives">
          <img class="img1" src="../assets/img/one/img01.png" alt="">
          <img class="img2" src="../assets/img/one/img02.png" alt="">
          <img class="img3" src="../assets/img/one/img02.png" alt="">
          <div class="item">
            <i class="iconfont icon-tree-round-relatives"></i>
            <div class="text">直系亲属</div>
          </div>
          <div class="item">
            <i class="iconfont icon-churujing"></i>
            <div class="text">出入境管理</div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { post, get } from "@/utils/axios";

export default {
  name: "people",
  components: {},
  data() {
    return {
      timer: null
    };
  },
  created() {
    this.timer = setInterval(() => {}, 120000);
  },
  mounted() {},
  destroyed() {
    this.timer = null;
  },

  methods: {
    // getdayPeople(day) {
    //   //每天实时人口
    //   let timestamp = Date.parse(new Date(day)) / 1000;
    //   let signValue = md5("330112NK07piZ0x9WcLpKW" + timestamp);
    //   post("/v1/data/10000017491", {
    //     area_code: "330112",
    //     sign: signValue,
    //     timestamp: timestamp
    //   }).then(res => {
    //     this.peopleArray = res.data;
    //     var count = 0;
    //     this.peopleArray.forEach(item => {
    //       count += Number(item.num);
    //     });
    //     this.peopleDay.push(String(count));
    //   });
    // }
  }
};
/**
 * 返回最近几天日期
 * @returns {string}
 */
function getDateStr() {
  var dataArr = [];
  var data = new Date();
  var year = data.getFullYear();
  data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份
  for (var i = 0; i < 12; i++) {
    data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
    var m = data.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    dataArr.push(data.getFullYear() + "-" + m);
  }
  return dataArr;
}
</script>

<style lang="scss" scoped>
#people {
  // width: 100%;
  .prople-box {
    align-items: flex-start;
    .title {
      text-align: left;
      line-height: 0.14rem;
      background-color: #0d2d50;
      color: #9ff4f6;
      margin-bottom: 0.3rem;
    }
    .text {
      line-height: 0.14rem;
    }
    .left {
      margin-right: 0.5rem;
      width: 2.1rem;
    }
    .right {
      width: 2.1rem;
      .relatives {
        margin-top: 0.05rem;
        position: relative;
        background-color: #fff;
        .img1 {
          width: 1.4rem;
          position: absolute;
          left: 50%;
          top: 0;
          transform: translate(-50%, 0);
        }
        .img2 {
          width: 0.96rem;
          position: absolute;
          left: 0;
          top: 0.2rem;
        }
        .img3 {
          width: 0.96rem;
          position: absolute;
          right: 0;
          top: 0.2rem;
        }
        .item {
          text-align: center;
          position: absolute;
          top: 0.32rem;
          &:nth-of-type(1) {
            left: 0.2rem;
          }
          &:nth-of-type(2) {
            right: 0.1rem;
          }
          .iconfont {
            color: $BL;
            font-size: 0.26rem;
          }
        }
      }
    }
  }
}
</style>
